<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <img src="../assets/apple.png" style="width: 30px; height: 30px" />
        <span>留言列表</span>
      </div>
    </template>
    <el-row :gutter="10">
      <el-col :span="4">
        <el-input
          placeholder="请输入搜索留言名称"
          v-model="searchContent"
        ></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button type="primary" @click="addLybInfo()">添加</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="编号" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标题" width="180">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top">
            <template #default>
              <p>标题: {{ scope.row.title }}</p>
              <p>作者: {{ scope.row.author }}</p>
            </template>
            <template #reference>
              <div class="name-wrapper">
                <el-tag size="medium">{{ scope.row.title }}</el-tag>
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="page_size"
      :current-page="page"
      @current-change="changePage"
    >
    </el-pagination>
  </el-card>
  <AddLyb
    :centerDialogVisible="centerDialogVisible"
    @onCloseDialog="closeDialogVisible"
  ></AddLyb>
  <EditLyb
    v-if="editDialogVisible === true"
    :editDialogVisible="editDialogVisible"
    :lybId="lybId"
    @onCloseEditDialog="closeEditDialogVisible"
  ></EditLyb>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import axios from "axios";
import AddLyb from "../views/AddLyb.vue";
import EditLyb from "../views/EditLyb.vue";
import { ElMessageBox, ElNotification } from "element-plus";
function loadData(state) {
  const params = {
    // 当前页
    page: state.page,
    // 每页条数
    page_size: state.page_size,
    // 重新加载数据的时候需要带上搜索内容，不然在使用搜索功能后，点击下一页的搜索内容，会出现非搜索的数据
    search: state.searchContent,
  };
  axios.get("/lybs/", { params }).then((res) => {
    // 将接口返回的数据赋值给state.tableData，注意后端返回的数据在results中
    state.tableData = res.data.results;
    // 总的条数
    state.total = res.data.count;
  });
}
// 搜索留言数据
function useHandleSearch(state) {
  const handleSearch = () => {
    // 搜索后默认展示第一页的内容
    state.page = 1;
    const params = {
      page: state.page,
      page_size: state.page_size,
      // search为后端接口搜索的参数
      search: state.searchContent,
    };
    axios.get("/lybs/", { params }).then((res) => {
      // 将接口返回的数据赋值给state.tableData，注意后端返回的数据在results中
      state.tableData = res.data.results;
      // 总的条数
      state.total = res.data.count;
    });
  };
  return {
    handleSearch,
  };
}
// 编辑商品信息
function useEdit(state) {
  const handleEdit = (index, row) => {
    state.editDialogVisible = true;
    state.lybId = row.id;
  };
  return {
    handleEdit,
  };
}
// 删除留言数据
function useDelete(state) {
  const handleDelete = (index, row) => {
    ElMessageBox.confirm("你确定要删除该条数据吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      callback: (action) => {
        if (action === "confirm") {
          axios.delete("/lybs/" + row.id).then((res) => {
            if (res.status === 204) {
              // 如果后端返回的状态码为204，代表删除成功
              ElNotification({
                title: "成功",
                message: "删除成功",
                type: "success",
                // 2000毫秒后消息消失
                duration: 2000,
              });
              loadData(state);
            } else {
              ElNotification({
                title: "失败",
                message: "删除失败",
                type: "error",
                // 2000毫秒后消息消失
                duration: 2000,
              });
            }
          });
        }
      },
    });
  };
  return {
    handleDelete,
  };
}
export default {
  // 注册组件
  components: { AddLyb, EditLyb },
  setup() {
    const state = reactive({
      tableData: [],
      // 添加留言信息弹出窗口的显示与隐藏
      centerDialogVisible: false,
      // 编辑留言信息弹出窗口的显示与隐藏
      editDialogVisible: false,
      // 总留言条数、当前页、每页条数
      total: 0,
      page: 1,
      page_size: 5,
      // 用户搜索输入内容
      searchContent: "",
      // 要编辑的留言ID
      lybId: 0,
    });
    // 钩子函数
    onMounted(() => {
      loadData(state);
    });
    // 添加留言信息，将dialog弹框的属性修改为ture
    const addLybInfo = () => {
      state.centerDialogVisible = true;
    };
    const closeDialogVisible = (visible, data) => {
      state.centerDialogVisible = visible;
      // 判断data中是否有添加的数据，如果有则重新获取数据，防止新添加的数据直接加载到当前页码
      if (data !== undefined) {
        loadData(state);
      }
    };
    const closeEditDialogVisible = (visible, data) => {
      state.editDialogVisible = visible;
      // 判断data中是否有重新编辑的数据，如果有则重新获取数据
      if (data !== undefined) {
        loadData(state);
      }
    };
    // 页码切换
    const changePage = (val) => {
      state.page = val;
      loadData(state);
    };
    // 如果模板中使用到相关的方法，一定要return
    return {
      // 将响应式对象中的所有数据转换为响应式的
      ...toRefs(state),
      addLybInfo,
      closeDialogVisible,
      ...useDelete(state),
      changePage,
      ...useHandleSearch(state),
      ...useEdit(state),
      closeEditDialogVisible,
    };
  },
};
</script>

<style>
</style>